<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有学生</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="12">
          <el-col :span="8">
        
          <el-input placeholder="请输入姓名" v-model="query.name" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getStudents"></el-button>
          </el-input>
        </el-col> 
       <el-col :span="4">
        <el-button  type="primary" @click="addStu">添加学生</el-button>
        </el-col>
        <el-col :span="4">
        <el-button type="success" icon="el-icon-check"  @click="downCsv" >下载</el-button>
        </el-col>
      </el-row> 

      <!-- 列表区域 -->
    <el-table
    :data="studentList"
    style="width: 100%"
    :default-sort = "sort"
    >
    <el-table-column  prop="ID"   label="ID"   sortable   width="80"> </el-table-column>
    <el-table-column  prop="CreatedAt"   label="创建日期"   sortable   width="180">
    <template slot-scope="scope">
        {{scope.row.CreatedAt|dataFormat}}
    </template>
     </el-table-column>
    <el-table-column  prop="age"   label="年龄"   sortable   width="180"> </el-table-column>
    <el-table-column  prop="name"   label="学生姓名"   sortable   width="180"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
              <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateStu(scope.row)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delStu(scope.row)"></el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[ 5, 8, 15]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>

     
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        >
       
        <el-form ref="addStuformRef" :model="addStuform"  label-width="80px">
            <el-form-item label="姓名" prop="name" >
              <el-input v-model="addStuform.name" ></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="addStuform.age"></el-input>
            </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeStu">确 定</el-button>
        </span>
    </el-dialog>
<!-- 这个是选择下载窗口-->
    <el-dialog
        title="下载"
        :visible.sync="DowndialogVisible"
        width="30%"
        >
       
        <el-form ref="downForm" :model="downForm"  label-width="80px">
            <el-form-item label="表名"  >
              <el-input v-model="downForm.table" ></el-input>

            </el-form-item>
            <el-form-item label="字段" >
              <el-checkbox-group v-model="downForm.fields">
                <el-checkbox label="ID"></el-checkbox>
                <el-checkbox label="created_at" ></el-checkbox>
              <el-checkbox label='name' ></el-checkbox>
              <el-checkbox label="age"></el-checkbox>             
            </el-checkbox-group>

            </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
        <el-button @click="DowndialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="downCheck">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>
<script>
// 
import download from '../tool/down.js'
export default {
  name: "student",
  data() {
    return {
        studentList:[],
        total:0,
        query:{
            page:1,
            pageSize:5,
            name:null,
        },
        sort:{
        prop: 'ID',
        order: 'ascending'
        },
        addStuform:{
          name:'',
          age:null,
          id:null,
        },
        dialogVisible:false,
        dialogTitle:'',
        DowndialogVisible:false,
        downForm:{
          table:'',
          fields:[],
        }
    }
  },
  created(){
      
  },
  mounted() {
    this.getStudents();
  },
  methods: {
      //监听size 改变的事件 
    handleSizeChange(newSize){
      console.log(newSize)
      this.query.pageSize=newSize
      this.getStudents()
    },
    //监听页码指改变的事件
    handleCurrentChange(newPage){
      console.log(newPage)
      this.query.page=newPage
      this.getStudents()
    },
    async getStudents() {
      const { data: res } = await this.$http.get("/stu/students",{params:this.query} );
      if (res.code != 0) return this.$message.error("获取学生列表失败");
      this.studentList = res.data;
      this.total=res.count
    },
    async delStu(row){
        const { data: res } = await this.$http.post("/stu/del/"+row.ID);
      if (res.code !== 0) return this.$message.error("删除学生失败");
      this.getStudents()
      return this.$message.success("删除学生成功")
    },
    async changeStu(){
      //效验参数是否有效哦
      this.$refs.addStuformRef.validate(async (valid)=>{
          if (!valid){ //无效
              return
          }
          var res
          if (this.addStuform.id==null){
            const {data:result}=await this.$http.post("/stu/add",this.addStuform)
            res=result
          }else
          {
            const {data:result}=await this.$http.post("/stu/update",this.addStuform)
            res=result
          }
          if (res.code!==0) return this.$message.error("保存失败:"+res.msg); 
          
          this.$message.success("保存成功")
          this.getStudents()
      })
      this.dialogVisible = false
    },
    updateStu(row){
      this.dialogTitle='修改学生'
      this.addStuform.id=row.ID
      this.addStuform.name=row.name
      this.addStuform.age=row.age
      this.dialogVisible=true
    },
    addStu(){
      this.dialogTitle='添加学生'
      this.addStuform.name=null
      this.addStuform.age=null
      this.addStuform.id=null
      this.dialogVisible=true
    },
    downCsv(){
      this.DowndialogVisible=true
    },
    async downCheck(){
      var query ={
        fields:this.downForm.fields
      }
      const {data:res}=await this.$http.post("/stu/downCsv",query)
      console.log(this.downForm.table+".csv")
      download(res,this.downForm.table+".csv")
    },
    
}
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}
.el-card {
  box-shadow: 0 1px 1px;
}
.card-bottom{
    margin-bottom: 10px;
    padding-left: 40%;
}
.el-table{
  margin-top:10px;
}
</style>
